<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="查看地图" name="first">
        <div class="submitcontainer">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="查看图层">
              <el-select v-model="ruleForm.layerEditCode" filterable clearable placeholder="请选择查看图层" size="small"
                @change="getlaycode">
                <el-option v-for="item in options" :key="item.layerCode" :label="item.layerName"
                  :value="item.layerCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="空间查询">
              <el-select v-model="ruleForm.splaytcnr" filterable clearable multiple placeholder="请选择空间查询图层"
                size="small">
                <el-option v-for="item in options" :key="item.layerCode" :label="item.layerName"
                  :value="item.layerCode">
                </el-option>
              </el-select>
            </el-form-item>
            <!--            <el-form-item label="图层属性" prop="resource">-->
            <!--              <el-radio-group v-model="ruleForm.resource">-->
            <!--                <el-radio label="显示"></el-radio>-->
            <!--                <el-radio label="不显示"></el-radio>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->
            <el-form-item label="关联查询">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="addd">添加关联</el-button>
            </el-form-item>
            <el-row :gutter="6" v-for="(fieldLst, index) in ruleForm.fieldLst" :key="index">
              <el-col :span="4" style="display: flex; align-items: center">
                <el-form-item label-width="0" :key="fieldLst.key" :prop="'fieldLst.' + index + '.labelName'" :rules="{
                  required: true,
                  message: '标签名称不能为空',
                  trigger: 'blur',
                }">
                  <el-input v-model="fieldLst.labelName" placeholder="标签名称" size="small" style="width: 100% !important">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" style="display: flex; align-items: center">
                <el-form-item label-width="0" :key="fieldLst.key" :prop="'fieldLst.' + index + '.layerFieldCode'"
                  :rules="{
                    required: true,
                    message: '选择图层字段',
                    trigger: 'change',
                  }">
                  <el-select v-model="fieldLst.layerFieldCode" clearable filterable placeholder="选择图层字段" size="small"
                    style="width: 93% !important">
                    <el-option v-for="item in lsylist" :key="item.value" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <i class="el-icon-link" style="margin-top: -20px"></i>
              </el-col>
              <el-col :span="5" style="display: flex; align-items: center">
                <el-form-item label-width="0" :key="fieldLst.key" :prop="'fieldLst.' + index + '.tableId'" :rules="{
                  required: true,
                  message: '选择关联表',
                  trigger: 'change',
                }">
                  <el-select v-model="fieldLst.tableId" clearable filterable placeholder="选择关联表" size="small"
                    style="width: 95% !important" @change="getditcid(fieldLst.tableId, index)">
                    <el-option v-for="item in tablelist" :key="item.tableId" :label="item.tableName"
                      :value="item.tableId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" style="display: flex; align-items: center">
                <el-form-item label-width="0" :key="fieldLst.key" :prop="'fieldLst.' + index + '.fieldId'" :rules="{
                  required: true,
                  message: '选择关联字段',
                  trigger: 'change',
                }">
                  <el-select v-model="fieldLst.fieldId" clearable filterable placeholder="选择关联字段" size="small"
                    style="width: 95% !important">
                    <el-option v-for="item in ruleForm.fieldLst[index].dictList" :key="item.fieldId + item.fieldName"
                      :label="item.fieldName" :value="item.fieldId">
                    </el-option>
                  </el-select>
                </el-form-item>

              </el-col>
              <el-col :span="5" style="display: flex; align-items: center">
                <el-form-item label-width="0" :key="fieldLst.key" :prop="'fieldLst.' + index + '.popFldId'" :rules="{
                  required: true,
                  message: '选择的字段',
                  trigger: 'change',
                }">
                  <el-select v-model="fieldLst.popFldId" clearable filterable placeholder="选择的字段" size="small"
                    style="width: 95% !important">
                    <el-option v-for="item in ruleForm.fieldLst[index].dictList" :key="item.fieldId + item.fieldName"
                      :label="item.fieldName" :value="item.fieldId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <i class="el-icon-delete" style="margin-top: -20px; color: red" @click.prevent="removeDomain(fieldLst)"
                  v-if="ruleForm.fieldLst.length > 1"></i>
              </el-col>
            </el-row>
            <el-form-item class="submitbtn">
              <el-button @click="resetForm('ruleForm')" size="small">保存</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')" size="small">保存并发布</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例管理" name="second">
        <el-table :data="tableData" border size="small" style="width: 100%">
          <el-table-column prop="legendName" label="图例名称" align="center" width="180">
          </el-table-column>
          <el-table-column prop="legendType" label="类型" align="center" width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.legendType === 0">基本</span>
              <span v-if="scope.row.legendType === 1">单值</span>
              <span v-if="scope.row.legendType === 2">分级</span>
            </template>
          </el-table-column>
          <el-table-column prop="tableName" align="center" label="关联表">
          </el-table-column>
          <el-table-column prop="fieldName" align="center" label="关联字段">
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间" :formatter="formatDate">
          </el-table-column>
          <el-table-column prop="updateTime" align="center" label="更新时间" :formatter="formatDate">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="el-icon-edit" style="margin-right: 20px; font-size: 20px"
                @click="editItem(scope.row.legendId)"></i>
              <i class="el-icon-delete" style="font-size: 20px; color: red" @click="delet(scope.row.legendId)"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="legendId ? '编辑图例' : '新建图例'" name="third">
        <addMap v-if="activeName === 'third'" ref="nodal" :ruleForm="ruleForm" @chanke="chanke" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { api } from "../server/api";
import addMap from './addMap'
import moment from 'moment'
export default {
  name: "ViewMap",
  components: {
    addMap
  },
  data() {
    return {
      activeName: 'first',
      options: [],
      lsylist: [],
      tableData: [],
      tablelist: [],
      ruleForm: {
        layerEditCode: '',
        splaytcnr: [],
        fieldLst: [
          {
            labelName: '',
            layerFieldCode: '',
            fieldId: '',
            tableId: '',
            dictList: [],
          }
        ]
      },
      rules: {
        layerEditCode: [
          { required: true, message: '请选择编辑图层', trigger: 'change' }
        ],
      },
      legendId: '',
    };
  },
  mounted() {
    this.layerList();
    this.stdappDictTbls()
  },
  methods: {
    formatDate(row, column) {
      var date = row[column.property];
      if (date == undefined) { return '' };
      return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss")
    },
    farmOtherMapLegendLst() {
      api.farmOtherMapLegendLst({ mapId: this.ruleForm.mapId }).then(res => {
        this.tableData = res
        console.log('图例列表', JSON.parse(JSON.stringify(res)))
      })
    },
    chanke() {
      this.activeName = 'second';
      this.legendId = '';
      this.farmOtherMapLegendLst()
    },
    editItem(legendId) {
      this.legendId = legendId;
      this.activeName = 'third';
      setTimeout(() => {
        this.$refs.nodal.gedyaje(this.ruleForm.mapId, legendId)
      }, 100);

    },
    delet(legendId) {
      api.farmOtherMapLegendDel({ legendId }).then(res => {
        this.farmOtherMapLegendLst()
      })
    },
    getview(data) {
      console.log(data)
      if (data.spaceLayers) {
        data.splaytcnr = data.spaceLayers.split(',')
      } else {
        data.splaytcnr = []
      }

      if (data.fieldLst.length > 0) {
        this.layerFields(data.layerEditCode)
        data.fieldLst.forEach((val, index) => {
          api.stdappTableDetail({ tableId: val.tableId }).then(res => {
            val.dictList = res.fieldLst
            val.key = Date.now() + index
          })
        })

        setTimeout(() => {
          this.ruleForm = data
        }, 100);

      } else {
        this.ruleForm.mapId = data.mapId
        this.ruleForm.moduleId = data.moduleId
        this.ruleForm.mapName = data.mapName
        this.ruleForm.mapType = data.mapType
        this.ruleForm.layerEditCode = data.layerEditCode
        this.ruleForm.layerReferCode = data.layerReferCode
        this.ruleForm.canDelete = data.canDelete
        this.ruleForm.launchStatus = data.launchStatus
        this.ruleForm.fieldLst = [
          {
            labelName: '',
            layerFieldCode: '',
            fieldId: '',
            tableId: '',
            dictList: [],
          }
        ]
      }

      console.log(this.ruleForm)
    },
    layerList() {
      api.layerList({ page: 1, limits: 200 }).then(res => {
        const { records } = res
        this.options = records
        console.log(res)
      })
    },
    getditcid(val, index) {
      console.log(val)
      console.log(index)
      // const finval=this.tablelist.find(value=>{
      //   return value.tableId===val
      // })
      // console.log(finval)
      this.ruleForm.fieldLst[index].dictList = []
      this.ruleForm.fieldLst[index].fieldId = ''
      this.getdetail(val, index)

    },
    getdetail(tableId, index) {
      api.stdappTableDetail({ tableId }).then((res) => {
        this.ruleForm.fieldLst[index].dictList = res.fieldLst
        this.$forceUpdate()
      })
    },
    getdictList(tableId, index) {
      api.dictList({ tableId }).then(res => {
        // this.$set( this.ruleForm.fieldLst[index],'dictList',res)

        console.log(this.ruleForm.fieldLst)
      })
    },
    stdappDictTbls() {
      api.stdstDataTableLst({}).then(res => {
        const finvalue = res.filter(val => {
          return val.tableType === 0
        })
        console.log(finvalue)
        this.tablelist = finvalue
      })
    },
    getlaycode() {
      this.lsylist = [];
      this.ruleForm.fieldLst.forEach(val => {
        val.layerFieldCode = ''
      })
      this.layerFields(this.ruleForm.layerEditCode)
      console.log(this.ruleForm.layerEditCode)
    },
    layerFields(layerCode) {
      const par = {
        layerCode: layerCode
      }
      api.layerFields(par).then(res => {
        this.lsylist = res
      })
    },
    resetForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.farmOtherMapUpd(this.ruleForm).then(response => {
            this.$message.success("保存成功");
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addd() {
      this.ruleForm.fieldLst.push({
        labelName: '',
        layerFieldCode: '',
        fieldId: '',
        tableId: '',
        dictList: [],
        key: Date.now()
      });
    },
    removeDomain(item) {
      var index = this.ruleForm.fieldLst.indexOf(item)
      if (index !== -1) {
        this.ruleForm.fieldLst.splice(index, 1)
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.splaytcnr.length > 0) {
            this.ruleForm.spaceLayers = this.ruleForm.splaytcnr.toString()
          } else {
            this.ruleForm.spaceLayers = null
          }

          api.farmOtherMapUpd(this.ruleForm).then(response => {
            const { launchStatus } = this.ruleForm
            if (launchStatus === 0) {
              api.farmOtherMapLaunch(this.ruleForm).then(res => {
                this.$message.success("发布成功");
              })
            } else {
              this.$message.success("已发布");
            }

          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClick(tab) {
      this.legendId = '';
      if (tab.index === '0') {
      } else if (tab.index === '1') {
        this.farmOtherMapLegendLst()
      } else if (tab.index === '2') {
        setTimeout(() => {
          this.$refs.nodal.gedyaje(this.ruleForm.mapId, this.legendId)
        }, 100);

      }
      console.log(tab);
    }
  }
}
</script>

<style>
.el-tabs__nav-wrap::after {
  background-color: #d1d1d1;
  height: 1px;
}

.submitcontainer {
  width: 900px;
  margin-top: 20px;
  height: 100%;
  position: relative;
}

.submitbtn {
  margin-top: 10%;
}
</style>
